﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写签名版</title>
    <script src="../Scripts/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../Scripts/bootstrap/js/jquery.min.js"></script>
    <script type="text/javascript" src="../Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../Scripts/QueryString.js"></script>
    <script type="text/javascript" src="../Scripts/config.js"></script>
    <script type="text/javascript" src="../Comm/Gener.js"></script>
    <script src="../Scripts/jq-signature.min.js" type="text/javascript"></script>
    <script src="../Scripts/jq-signature.js" type="text/javascript"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        .clearfix {
            *zoom: 1;
        }

        .wapr_nav {
            border-bottom: 2px solid #ccc;
        }

        .wapr_nav_left {
            margin: 10px 0;
            padding: 0 20px;
            float: left;
            font-size: 15px;
            color: #333;
            text-align: center;
            line-height: 30px;
            border-right: 1px solid #ccc;
            cursor: pointer;
        }

        .wapr_nav_right {
            float: right;
            margin: 10px 0;
            padding: 0 20px;
            font-size: 15px;
            color: #333;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }

        .wapr_nav_left_img1 {
            display: block;
            width: 15px;
            height: 15px;
            background: url(Img/1.png) no-repeat;
            margin-left: 7px;
        }

        .wapr_nav_left_img2 {
            display: block;
            width: 15px;
            height: 15px;
            background: url(Img/2.png) no-repeat;
            margin-left: 7px;
        }

        .wapr_nav_left_img3 {
            display: block;
            width: 15px;
            height: 15px;
            background: url(Img/3.png) no-repeat;
            margin-left: 7px;
        }

        .wapr_nav_left_img4 {
            display: block;
            width: 15px;
            height: 15px;
            background: url(Img/4.png) no-repeat;
            margin-left: 7px;
        }

        .qudiao {
            border-right: none;
        }

        .qianziban {
        }
    </style>
</head>
<body>
    <div class="wapr">
        <div class="wapr_nav clearfix">
            <div id="saveBtn" onclick="saveSignature();" class="wapr_nav_left"><span class="wapr_nav_left_img1"></span>保存</div>
            <!-- <div onclick="getliu()" class="wapr_nav_left"><span class="wapr_nav_left_img2"></span>撤销</div> -->
            <div id="clearBtn" onclick="clearCanvas()" class="wapr_nav_left qudiao"><span class="wapr_nav_left_img3"></span>重置</div>
            <div class="wapr_nav_right"><span class="wapr_nav_left_img4"></span>取消</div>
        </div>
        <div id="signature" class="js-signature" data-border="0px solid black" data-line-color="#bc0000"
             data-auto-fit="true">
        </div>
    </div>
    <script type="text/javascript">
        var imagePath = "";
        var SavePC = ""
        $(document).on('ready', function () {
        	//alert('还未实现.');
            //if ($('.js-signature').length) {
            $('.js-signature').jqSignature();
            var canvas = $('#signature').children()[0];
             //canvas.width = img.width;
            canvas.height = 159;
            canvas.style.height = "159px";
            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#000";
            ctx.restore();
            InsertImg();
            //  }
        });

        
        function ComeBack() {

        }
        
        //加载保存的签名
        function InsertImg() {
            //从缓存取出除父页面图片的二进制流
            var SavePC= localStorage.getItem("writeImg");
            
        	var img = new Image();
            img.src = SavePC;
            img.width=300;
            img.height=80;
           
            img.onload = function() {
            //console.log($('#signature').children()[0]);
            var canvas = $('#signature').children()[0];
            //canvas.width = img.width;
            //canvas.height = 300;
            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = "#000";
            ctx.drawImage(img, 0, 0);
            ctx.restore();
            var data = new Date();
            var day = data.getDate();
            var day1 = data.getMonth() + 1;
            ctx.save();
            ctx.beginPath();
            ctx.textBaseline = "middle";
            ctx.textAlign = "center";
            ctx.font = "bold 20px 宋体";
            ctx.fillText(day1 + "." + day, 300, 80);
            ctx.restore();
            ctx.save();
            }
        }

        function clearCanvas() {
            //$('#signature').html('<p><em></em></p>');
            //$('.js-signature').eq(0).jqSignature('clearCanvas');
            //$('#saveBtn').attr('disabled', true);
             var canvas = $('#signature').children()[0];
             var ctx = canvas.getContext("2d");
             ctx.clearRect(0,0,canvas.width,canvas.height); 
            // canvas.jqSignature('clearCanvas');
        }
        function saveSignature() {

        	 $('#signature').empty();
        	 var pic = $('.js-signature').jqSignature('getDataURL');
           //var pic = $('.js-signature').eq(0).jSignature("getData", "svgbase64")
            SavePC = pic;
            //图片二进制流存入到缓存中
            window.localStorage.setItem("writeImg", SavePC);
            //console.log(SavePC+"pic=========");
            var writType = GetQueryString("WritType");
            if (writType != null && writType != undefined && writType == "WorkCheck") {
                parent.setHandWriteSrc("WorkCheck", pic, 1);
                return;
            }
            var newpic = pic.replace(/^data:image\/(png|jpg);base64,/, "");
            var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm");
            handler.AddPara("FK_Node", GetQueryString("FK_Node"));
            handler.AddPara("WorkID", GetQueryString("WorkID"));
            handler.AddPara("FK_Flow", GetQueryString("FK_Flow"));
            handler.AddPara("KeyOfEn", GetQueryString("KeyOfEn"));
            handler.AddPara("imageData", newpic);
            var data = handler.DoMethodReturnString("HandWriting_Save");
            if (data.indexOf('err@') == 0) {
                alert(data);
                imagePath = "";
                return;
            }
            if (data.indexOf('info@') == 0) {
                imagePath = data.replace('info@', '');
                parent.setHandWriteSrc(GetQueryString("KeyOfEn"), imagePath, 0);
            }

            alert("图片上传成功.");
        }

        $('.js-signature').eq(0).on('jq.signature.changed', function () {
            $('#saveBtn').attr('disabled', false);
        });

    </script>
</body>
</html>